<template>
  <div class="comment-section">
    <h4>评论</h4>
    <div class="comment-list">
      <div v-if="comments.length === 0" class="no-comments">
        还没有评论，快来抢沙发！
      </div>
      <CommentItem v-for="comment in comments" :key="comment.id" :comment="comment" />
    </div>
    <div class="comment-input-area">
      <textarea
          v-model="newCommentContent"
          placeholder="发表你的评论..."
          rows="3"
      ></textarea>
      <button @click="submitComment" :disabled="!newCommentContent.trim()" class="submit-comment-button">
        发表评论
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import CommentItem from './CommentItem.vue';

defineProps({
  comments: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(['addComment']);

const newCommentContent = ref('');

const submitComment = () => {
  if (newCommentContent.value.trim()) {
    emits('addComment', newCommentContent.value);
    newCommentContent.value = '';
  }
};
</script>

<style scoped>
.comment-section {
  background-color: #fefefe;
  border-top: 1px solid #eee;
  padding-top: 20px;
  margin-top: 20px;
}

.comment-section h4 {
  color: #555;
  margin-bottom: 15px;
  text-align: center;
}

.comment-list {
  max-height: 300px; /* 限制评论区域高度 */
  overflow-y: auto; /* 允许滚动 */
  padding-right: 10px; /* 防止滚动条遮挡内容 */
  margin-bottom: 20px;
}

.no-comments {
  text-align: center;
  color: #999;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.comment-input-area {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #eee;
}

.comment-input-area textarea {
  width: calc(100% - 20px);
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 10px;
}

.submit-comment-button {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
  width: 100%;
}

.submit-comment-button:hover:not(:disabled) {
  background-color: #218838;
}

.submit-comment-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>